<template>
  <el-card class="card-panel-max">
    <el-divider>筛选系统</el-divider>
    <el-form class="filter-form" label-position="top" :model="fromData">
      <el-form-item label="平台">
        <el-select v-model="selItem.platform" placeholder="请选择" clearable @change="selPlat">
          <el-option v-for="(item,index) in fromData.platform" :key="index" :label="item.label" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商家">
        <el-select v-model="selItem.brand" placeholder="请选择" clearable @change="selBrand">
          <el-option v-for="(item,index) in fromData.brand" :key="index" :label="item.label" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item class="condition" label="商品筛选">
        <el-button class="item" @click="addShopFilter()">添加</el-button>
        <el-select v-model="fromData.shop.ret.field" class="item" clearable filterable placeholder="请选择字段">
          <el-option
            v-for="(fieldItem,i) in fromData.shop.fields"
            :key="i"
            class="item"
            :label="fieldItem.alias"
            :value="fieldItem.column"
          />
        </el-select>
        <el-select v-model="fromData.shop.ret.symbol" class="item" clearable filterable placeholder="请选择过滤条件">
          <el-option v-for="(item,i) in fromData.shop.symbol" :key="i" :label="item" :value="item" />
        </el-select>
        <el-input v-model="fromData.shop.ret.value" class="item" />
        <!--筛选框-->
        <div v-for="(shopFilterItem, index) in filterData.shop" :key="index" class="filter-tag">
          <el-tag class="item-2">
            <span type="danger" style="cursor: pointer;color: red" @click="delTag(index)"><i class="el-icon-delete" /></span>
            <span class="padd-left">{{ shopFilterItem.field }}</span>
            <span class="padd-left">{{ shopFilterItem.symbol }}</span>
            <span class="padd-left">{{ shopFilterItem.value }}</span>
          </el-tag>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="onSubmit">提交筛选</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {
  getPlatform,
  getBrand
} from '@/api/visualFilter'
import {
  fieldAlias
} from '@/api/remote-search.js'
export default {
  name: 'LeftPanel',
  data() {
    return {
      labelPosition: 'right',
      // 数据来源
      fromData: {
        platform: [],
        brand: [],
        shop: {
          fields: [],
          symbol: ['>', '<', '<=', '>=', '=', '!=', 'like', 'not like', 'is null', 'is not null'],
          ret: {}
        }
      },
      // 发送给后端的数据
      filterData: {
        platform_id: '',
        brand_id: '',
        shop: []
      },
      selItem: {}
    }
  },
  mounted() {
    this.getData()
    fieldAlias({
      table_name: 'shop_info'
    }).then((res) => {
      this.fromData.shop.fields = res.data
    })
  },
  methods: {
    getData() {
      getPlatform().then(res => {
        this.fromData.platform = res.data
      })
    },
    onSubmit() {
      this.$emit('getShop', this.filterData)
    },
    removeShopFilter(item) {
      const index = this.filterData.shop.indexOf(item)
      if (index !== -1) {
        this.filterData.shop.splice(index, 1)
      }
    },
    addShopFilter() {
      const fiData = this.fromData.shop.ret
      this.filterData.shop.push(fiData)
      this.$set(this.fromData.shop, 'ret', {})
    },
    delTag(index) {
      this.filterData.shop.splice(index, 1)
    },
    selPlat(item) {
      this.filterData.platform_id = item
      this.fromData.brand = []
      getBrand({
        platform_id: item
      }).then(res => {
        this.fromData.brand = res.data
      })
    },
    selBrand(id) {
      this.filterData.brand_id = id
    }
  }
}
</script>
<style lang="scss">
  .el-select {
    width: 100%;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;

    .el-select .el-input {
      width: 100px;
    }
  }

  .filter-tag {

    .item-2 {
      margin-top: 5px;

      .padd-left {
        padding-left: 15px;
      }
    }
  }

  .condition {
    .item {
      padding-top: 10px;
    }
  }
</style>
